<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>填单任务列表</span>
        <div style="float: right">
          <el-button 
            type="primary" 
            @click="showUploadForm = true"
            style="margin-right: 10px"
          >
            新增任务
          </el-button>
          <el-button 
            type="primary" 
            icon="el-icon-refresh"
            @click="getList"
          >
            刷新
          </el-button>
        </div>
      </div>

      <el-table 
        :data="list" 
        border 
        fill 
        highlight-current-row
        v-loading="loading"
      >
        <el-table-column prop="task_name" label="任务名称" width="350" />
        <el-table-column prop="login_user" label="填单人" width="120" />
        <el-table-column prop="create_date" label="填单日期" width="180" />
        <el-table-column prop="exec_status" label="填单状态" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.exec_status === '成功' ? 'success' : 'danger'">
              {{ row.exec_status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="{row}">
            <el-button 
              size="mini" 
              type="primary" 
              @click="downloadExcel(row)"
            >
              下载Excel
            </el-button>
            <el-button 
              size="mini" 
              type="danger" 
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination 
        :total="total" 
        :page.sync="listQuery.page" 
        :limit.sync="listQuery.limit" 
        @pagination="getList" 
      />

    </el-card>
    <upload-form 
      :show-dialog="showUploadForm" 
      @close="showUploadForm = false"
      @success="getList"
    />
  </div>
</template>

<script>
import request from '@/utils/request'
import UploadForm from './UploadForm.vue'

export default {
  name: 'FillformList',
  components: { UploadForm },
  data() {
    return {
      showUploadForm: false,
      list: [],
      total: 0,
      loading: false,
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    downloadExcel(row) {
      this.$message.info('正在准备下载...')
      window.open(`/base/smart/fillform/download/${row.id}`)
    },
    // 在getList方法中添加调试日志
    getList() {
      this.loading = true
      this.showUploadForm = false
      request({
        url: '/smart/fillform/list',
        method: 'get',
        params: {
          page  :  this.listQuery.page,
          limit :  this.listQuery.limit
        }
      }).then(response => {
        console.log('API响应:', response) // 添加这行
        this.list = response.data
        this.total = Number(response.data.total) || 0
        this.loading = false
      }).catch(error => {
        console.error('API错误:', error) // 添加错误处理
        this.loading = false
      })
    },
    handleDetail(row) {
      this.$router.push(`/smart/fillform/detail/${row.id}`)
    },
    handleDelete(row) {
      this.$confirm('确认删除该任务?', '提示', {
        type: 'warning'
      }).then(() => {
        this.loading = true
        request({
          url: `/smart/fillform/delete/${row.id}`,
          method: 'delete'
        }).then(() => {
          this.$message.success('删除成功')
          this.getList()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>